<template>
	<view class="content">
		<view class="Meeting">
			<view class="MeetingImg"><image src="../../../../static/logo.png"></image></view>
			<view class="order">
				<view class="order_top">
					<text>会议室1</text>
					<text>10-15人</text>
				</view>
				<view class="order_content">
					<view class="uni-form-item uni-column">
						<view class="title">时间：</view>
						<input class="uni-input" focus placeholder="2021-5-20（星期一）  14：00~16:00   " />
						<text @click="modifyDate()">修改</text>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">预留信息：</view>
						<view>
							<input class="uni-input" focus placeholder="请输入姓名" />
							<input class="uni-input" focus placeholder="请输入手机号" />
						</view>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">备注：</view>
						<textarea class="popup_textarea" placeholder="不超过100字" v-model="feedbackContent"></textarea>
						<!-- <text>提示：每小时100元，预约需要提前支付10%定金</text> -->
					</view>
					<view class="button-login" hover-class="button-hover" @tap="bindLogin"><text>预约</text></view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		about() {
			uni.navigateTo({
				// ? 后面加要传的参数， 多个参数用 & 隔开
				url: './ReserveDetails/ReserveDetails'
			});
		},
		modifyDate(){
			uni.navigateTo({
				// ? 后面加要传的参数， 多个参数用 & 隔开
				url: '../ChoiceDate/ChoiceDate'
			});
		}	
	}
};
</script>

<style lang="less">
.content {
	background: #f2f2f2;
	height: 100vh;
	.Meeting {
		width: 100%;
		box-shadow: 0px 3px 30px 0px rgba(204, 204, 204, 0.32);
		.MeetingImg {
			position: relative;
			width: 100%;
			height: 400upx;
			image {
				width: 100%;
				height: 400upx;
				background: #e50012;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		.order {
			width: 100%;
			background: #ffffff;
			box-shadow: 0px 3px 30px 0px rgba(204, 204, 204, 0.32);
			border-radius: 30upx;
			position: absolute;
			top: 30%;
			.order_top {
				display: flex;
				justify-content: space-between;
				margin: 0px auto;
				position: 70upx 0;
				padding: 30upx 30upx;
				border-bottom: 20upx solid #f2f2f2;
			}
			.order_content{
				.uni-form-item{
					display: flex;
					padding: 20upx;
					border-bottom: 1px solid #f2f2f2;
					.title{
						width: 150upx;
						font-size: 30upx;
						uni-input{
							 width: 404rpx;
							 font-size: 80rpx;
						}
					}
					
					uni-text{
						position: absolute;
						right: 5%;
						color: #CC0000;
						font-size: 30upx;
						
					}
					.popup_textarea{
						background: #F2F2F2;
						border-radius: 20upx;
						padding: 20upx;
					}
				}
				.button-login {
					color: #ffffff;
					font-size: 34rpx;
					width: 470rpx;
					height: 100rpx;
					line-height: 100rpx;
					background: #e50012;
					box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
					border-radius: 50rpx;
					text-align: center;
					margin: 60rpx auto;
				}
				
				.button-hover {
					background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
				}
			}
		}
	}
}
</style>
